<template>
  <div class="box">
    <div class="one" v-if="coll.cover.length > 1">
      <div class="txt">
        <p>{{coll.title}}</p>
      </div>
      <div class="images">
        <!-- <img src="val" alt="" v-for="(val) in img"> -->
        <img :src="coll.cover[0].url" alt />
        <img :src="coll.cover[1].url" alt />
        <img :src="coll.cover[2].url" alt />
      </div>
      <div class="time">
        <span>{{coll.user.nickname}} 0跟帖</span>
      </div>
    </div>

    <!-- 1图结构 -->
    <div class="two" v-if="coll.cover.length <= 2">
      <div class="txt">
        <div class="tet"> {{coll.title}}</div>
        <span>{{coll.user.nickname}}   0跟帖</span>
      </div>
      <img :src="coll.cover[0].url" alt="">
    </div>

    <div class="three" v-if="coll.type == 2">
      <div class="per">用于展示长列表，当列表即将滚动到底部时</div>
      <div class="image"> <img src="../../assets/14.png" alt=""></div>
      <span>火星时报  0跟帖</span>
    </div>
  </div>
</template>

<script>
export default {
  props: ["coll"],
};
</script>

<style lang="less" scoped>
.box {
  .one {  
    padding: 14/360 * 100vw;
    display: flex;
    flex-direction: column;
    border-bottom: solid 1px #8f8f88;
    .time {
      color: #8f8f88;
      margin-top: 10/360 * 100vw;
    }
    .images {
      height: 70/360 * 100vw;
      display: flex;
      img {
        width: 33%;
        object-fit: cover;
      }
    }
  }
  .two{   //三图样式
    display: flex;
    padding: 14/360*100vw;
    height: 90/360*100vw;
    border-bottom: solid 1px #afafaf;
    .txt{
      width: 70%;
      display: flex;
      flex-direction:column;
      justify-content: space-between;
      .tet{
        font-size: 15/360*100vw;
      }
      span{
        color: rgb(155, 150, 150);
        font-size: 12/360*100vw;
      }
    }
    img{
      display: block;
      width: 30%;
      object-fit: cover;
    }
  }
  .three{
    padding: 14/360*100vw;
    border: solid 1px #afafaf;
    .per{
      font-size: 16/360*100vw;
    }
    .image{
      height: 150/360*100vw;
      margin: 6/360*100vw 0;
      img{
        min-width: 100%;
        height: 100%;
      }
    }
    span{
      font-size: 13/360*100vw;
      color: #afafaf;
    }
  }
}
</style>